<template>
	<view>
		<textarea class="texts" v-model="feedback.opinion" auto-height='true' placeholder="请输入反馈意见" autoHeight ></textarea>
		<view class="radious">
			<view style="height: 50upx;font-size: 30upx;line-height: 50upx;margin-left: 20upx;">
				请选择反馈类型
			</view>
			<u-radio-group
			    placement="row"
			    @change="groupChange"
			  >
			    <u-radio
			      style="margin: 20upx;"
			      v-for="(item, index) in radiolist1"
			      :key="index"
			      :label="item.name"
			      :name="item.name"
			      @change="radioChange(index)"
			    >
			    </u-radio>
			  </u-radio-group>
		</view>
		<view class="phone">
			<input style="height: 60upx;line-height: 60upx;" type="text" value="" v-model="feedback.contactInformation" placeholder="请留下联系方式"/>
		</view>
		<button class="btn" @click="addfeedback()">提交</button>
	</view>
</template>

<script>
	import {
		addfeedback
	} from '@/api/minefile'
	export default {
		data() {
			return {
				 radiolist1: [{
				            name: '功能反馈',
				            disabled: false
				          },
				            {
				              name: '购物心愿单',
				              disabled: false
				            }
				          ],
				          // u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				          radiovalue1: '功能反馈',
				feedback:{
					opinion:null,
					opinionType:null,
					contactInformation:null,
				}
			}
		},
		methods: {
			      radioChange(n) {
			        this.feedback.opinionType = n;
			      },
				  addfeedback(){
					  if(this.feedback.opinion == null){
						  uni.showToast({
						  	title: '请输入反馈意见',
						  	icon:'none',
						  	duration: 2000
						  });
						return;
					  }
					  if(this.feedback.opinionType == null){
						  uni.showToast({
						  	title: '请选择反馈类型',
						  	icon:'none',
						  	duration: 2000
						  });
					  	return;
					  }
					  if(this.feedback.contactInformation == null){
						  uni.showToast({
						  	title: '请输入联系方式',
						  	icon:'none',
						  	duration: 2000
						  });
					  	return;
					  }
				  	addfeedback(this.feedback).then(res => {
				  		if(res.success == 1){
				  			uni.showToast({
				  				title: '反馈成功',
				  				icon:'success',
				  				duration: 2000
				  			});
				  		}else{
				  			uni.showToast({
				  				title: res.data,
				  				icon:'none',
				  				duration: 2000
				  			});
				  		}	
				  	})
				  },
		}
	}
</script>

<style>
	page {
		background: #f0f0f0;
	}
</style>
<style lang="scss">
	.texts{
		background-color: #FFFFFF;
		width: 95%;
		margin: 0 auto;
		min-height: 250upx;
		margin-top: 20upx;
		border: 1upx solid #707070;
	}
	.radious{
		background-color: #FFFFFF;
		width: 95%;
		margin: 40upx auto 0 auto;
		border: 1upx solid #707070;
	}
	.phone{
		background-color: #FFFFFF;
		width: 95%;
		margin: 40upx auto 0 auto;
		height: 60upx;
		line-height: 60upx;
		border: 1upx solid #707070;
	}
	.btn{
		background-color: #FC6758;
		width: 95%;
		color: #FFFFFF;
		margin: 40upx auto 0 auto;
		border-radius: 999rem;
	}
</style>